<template>
  <div id="ideaMarket">
    <div class="ideaMarketContent">
      <div class="ideaMarketContentLeft">
        <ul>
          <li v-for="(item, index) in creativeProducts" :key="index" @click="jumpTo('/worksDetail?sceneType=sell&worksId=' + item.id)">
            <img class="ideaMarketContentLeftWorksImage" :src="$globalImageUrl + item.productImg" alt="">
            <div class="ideaMarketContentLeftWorksListCon">
              <h2 class="ellipse">{{item.productName}}</h2>
              <p>发布于{{item.createTime}}</p>
              <p>交易次数：{{item.buyNum}}</p>
              <div class="ideaMarketContentLeftRemark">
                <img src="../../assets/img/common/browse.png" alt="">
                <span>{{item.watchNum}}</span>
                <img src="../../assets/img/common/comment.png" alt="">
                <span>{{item.commentNum}}</span>
                <img src="../../assets/img/common/praise.png" alt="">
                <span>{{item.likeNum}}</span>
              </div>
              <div style="width: 100%; height: 2px; background-color: #eee; margin: .05rem 0;"></div>
              <div class="ideaMarketContentLeftPrice">
                <b><i>{{item.price}}</i>元</b>
              </div>
            </div>
          </li>
        </ul>
        <div class="pageNumber" v-if="pageTotals != 0">
          <div @click="prevPage()">上一页</div>
          <div @click="nowPage(item, )" :class="{pageActive: pageActiveIndex === item}" v-for="(item, index) in pageTotals" :key="index">{{item}}</div>
          <div @click="nextPage()">下一页</div>
        </div>
      </div>
      <div class="ideaMarketContentRight">
        <ul>
          <li>
            <label for="ideaMarketSearch">
              <input id="ideaMarketSearch" type="text" placeholder="搜索..." @keydown.enter="fetchProductList()" v-model="searchText">
              <img src="../../assets/img/ideaMarket/sear.png" alt="" @click="fetchProductList()">
            </label>
          </li>
          <li v-for="(item, index) in kindTabData" :key="index">
            <p :class="{avtive: kindTabIndex === index}" @click="onKindTab(index, item.dictCode)">{{item.dictLabel || item}}</p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ideaMarket',
  data () {
    return {
      pageTotals: 1,
      pageActiveIndex: 1,
      data: '',
      kindTabIndex: 0,
      kindTabData: ['全部', '绘画', '雕塑', '书法', '传媒', '影像', '表演', '烹饪', '时尚', '工艺', '建筑'],
      creativeProducts: [],
      searchText: '',
      dictCode: ''
    }
  },
  created () {
    this.fetchProductClassifyList()
    this.fetchProductList()
  },
  // mounted () {
  // },
  methods: {
    // 上一页
    prevPage () {
      if (this.pageActiveIndex > 1) {
        this.pageActiveIndex--
        this.fetchProductList()
      }
    },
    // 下一页
    nextPage () {
      if (this.pageTotals > this.pageActiveIndex) {
        this.pageActiveIndex++
        this.fetchProductList()
      }
    },
    // 选择页码
    nowPage (index) {
      this.pageActiveIndex = index
      this.fetchProductList()
    },
    onKindTab (val, dictCode) {
      if (this.kindTabIndex === val) {
        return
      }
      this.dictCode = dictCode
      this.kindTabIndex = val
      this.fetchProductList()
    },
    // 获取右侧分类
    fetchProductClassifyList () {
      this.$api.getProductClassifyList({
      }).then(res => {
        this.kindTabData = [{dictLabel: '全部'}, ...res.data]
      })
    },
    // 查询当前创意产品
    fetchProductList () {
      this.$api.getProductList({
        pageNum: this.pageActiveIndex,
        productType: this.dictCode,
        productName: this.searchText
      }).then(res => {
        this.creativeProducts = res.data
        this.pageTotals = Math.ceil(res.total / 10)
        console.log(res)
      })
    }

  }
}
</script>

<style lang="less" scoped>
#ideaMarket{
  .ideaMarketContent{
    width: 1200px;
    margin: auto;
    font-size: 0;
    padding: .5rem 0;
    .ideaMarketContentLeft{
      width: 70%;
      display: inline-block;
      vertical-align: top;
      .pages{
        height: 1rem;
        position: relative;
        top: 0;
        z-index: 666;
      }
      .pageNumber{
        width: 100%;
        height: 50px;
        padding: .2rem;
        text-align: center;
        .pageActive{
          color: #fff;
          background-color: #15A29C;
        }
        div{
          display: inline-block;
          font-size: .16rem;
          font-weight: 500;
          color: #333;
          line-height: .24rem;
          background-color: #fff;
          padding: .03rem .1rem;
          margin: 0 .05rem;
        }
      }
      ul{
        display: flex;
        justify-content: left;
        flex-wrap: wrap;
        li{
          width: 2rem;
          display: inline-block;
          background-color: #fff;
          margin-bottom: .1rem;
          margin-right: .1rem;
          border-radius: .05rem;
          overflow: hidden;
          img.ideaMarketContentLeftWorksImage{
            width: 2rem;
            height: 2rem;
            display: inline-block;
          }
          .ideaMarketContentLeftWorksListCon{
            padding: .05rem .1rem;
            h2{
              font-size: 0.14rem;
              line-height: 0.22rem;
              font-weight: 500;
              color: #333;
            }
            p{
              font-size: 0.12rem;
              line-height: 0.2rem;
              font-weight: 500;
              color: #999999;
            }
            div.ideaMarketContentLeftRemark{
              img{
                width: .12rem;
                height: .12rem;
                display: inline-block;
                vertical-align: middle;
              }
              span{
                font-size: 0.13rem;
                font-weight: 500;
                color: #aaa;
                line-height: 0.16rem;
                vertical-align: middle;
                padding: 0 .03rem;
              }
            }
            div.ideaMarketContentLeftPrice{
              line-height: 0.25rem;
              b{
                font-weight: 500;
                font-size: 0.16rem;
                color: #333;
                line-height: 0.16rem;
                vertical-align: middle;
                i{
                  font-style: normal;
                  color: #e94b42;
                }
              }
            }
          }
        }
      }
    }
    .ideaMarketContentRight{
      width: 30%;
      display: inline-block;
      vertical-align: top;
      padding-left: .2rem;
      ul{
        li{
          background-color: #fff;
          border-radius: .1rem;
          height: .5rem;
          margin-bottom: .15rem;
          overflow: hidden;
          label{
            display: inline-block;
            width: 100%;
            height: 100%;
            position: relative;
            input#ideaMarketSearch {
              display: inline-block;
              width: 100%;
              height: 100%;
              padding-left: .2rem;
              padding-right: .5rem;
              font-size: .16rem;
              font-weight: 500;
              color: #333;
              line-height: .5rem;
            }
            img{
              width: .25rem;
              height: .25rem;
              position: absolute;
              right: .15rem;
              top: 50%;
              transform: translateY(-50%);
            }
          }
          p{
            line-height: 0.5rem;
            font-size: 0.2rem;
            font-weight: bold;
            color: #333;
            text-align: center;
          }
          p.avtive{
            color: #15a29c;
          }
        }
      }
    }
  }
}
</style>
